<template>
  <div class="container">
    <el-dialog
      title="创建付款单"
      :visible.sync="dialog.centerDialogVisible"
      width="600px"
      center
      :lock-scroll="true"
      @open="getData"
      @close="hideDialog"
    >
      <el-form
        ref="form"
        :model="formData"
        label-width="100px"
        label-position="left"
      >
        <el-form-item label="付款方式：">
          <el-radio
            v-model="formData.radio"
            label="1"
            @change="way(formData.radio)"
            >银行卡</el-radio
          >
          <el-radio
            v-model="formData.radio"
            label="2"
            @change="way(formData.radio)"
            >现金</el-radio
          >
        </el-form-item>
        <el-form-item label="付款账户：" v-if="select">
          <el-select v-model="formData.describe" placeholder="请选择付款账户">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <el-dialog
        width="600px"
        title="创建付款单存在负付款单"
        :visible.sync="innerVisible"
        append-to-body
        @close="hideDialog"
        center
      >
        <el-table
          border
          :data="tableData"
          ref="multipleTable2"
          style="width: 100%"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" align="center"></el-table-column>
          <el-table-column prop="supplier_name" label="供应商" align="center">
          </el-table-column>
          <el-table-column prop="amount" label="合计总金额" align="center">
          </el-table-column>
          <el-table-column
            prop="zheng_amount"
            label="正付款单金额"
            align="center"
          >
          </el-table-column>
          <el-table-column prop="fu_amount" label="负付款单金额" align="center">
          </el-table-column>
        </el-table>
        <span slot="footer" class="dialog-footer">
          <el-button @click="cancel">取 消</el-button>
          <el-button type="primary" @click="btn(1)">只生成正付款单</el-button>
          <el-button type="primary" @click="btn(2)">生成全部付款单</el-button>
        </span>
      </el-dialog>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="confirm()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import {
  selectBankAccountList,
  createPayBill,
  createPayBillnew
} from "@/api/superSettlement/settlementList";
export default {
  props: {
    dialog: Object
  },
  data() {
    return {
      formData: {
        radio: "1",
        describe: ""
      },
      innerVisible: false,
      tableData: [],
      options: [],
      select: true,
      handleSelection: [],
      supplier_idstr: []
    };
  },
  methods: {
    getData() {
      this.options = [];
      selectBankAccountList().then(res => {
        if (res.code == 0) {
          res.data.data.forEach(data => {
            this.options.push({
              value: data.id,
              label: `${data.bank_name}[${data.account}](${data.area_name})`,
              pay_amount_notice: data.pay_amount_notice
            });
          });
        }
      });
    },
    hideDialog() {
      this.dialog.centerDialogVisible = false;
      this.options = [];
      this.select = true;
      this.tableData = [];
      this.innerVisible = false;
      this.formData.radio = "1";
      this.formData.describe = "";
    },
    //选择付款方式
    way(val) {
      if (val == "2") {
        this.select = false;
        this.formData.describe = "";
      } else {
        this.select = true;
      }
    },
    btn(num) {
      let data = {
        idstr: this.dialog.ids.join(","),
        type: this.formData.radio,
        payment_id: this.formData.describe == "" ? 0 : this.formData.describe,
        mark: 0,
        remark: num,
        supplier_idstr: this.supplier_idstr.join(",")
      };
      console.log(data, 9999);
      createPayBillnew(data).then(res => {
        if (res.code == 0) {
          this.$message({
            type: "success",
            message: res.msg || res.message
          });
          this.hideDialog();
          this.$emit("upData", "true");
        } else {
          this.$message({
            type: "error",
            message: res.msg || res.message
          });
        }
      });
    },
    //提交
    confirm() {
      if (this.select) {
        if (this.formData.describe) {
          let boolArr = this.options.filter(res => {
            return res.value == this.formData.describe;
          });
          if (boolArr[0].pay_amount_notice) {
            this.$confirm(boolArr[0].pay_amount_notice, {
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              type: "warning"
            })
              .then(() => {
                this.payBillnew()
              })
              .catch(() => {
                this.$message({
                  type: "info",
                  message: "已取消"
                });
              });
          } else {
            this.payBillnew()
          }
        } else {
          this.$message({
            type: "warning",
            message: "请选择付款账户"
          });
        }
      } else {
        this.payBillnew()
      }
    },
    payBillnew() {
      let data = {
        idstr: this.dialog.ids.join(","),
        type: this.formData.radio,
        payment_id: this.formData.describe == "" ? 0 : this.formData.describe,
        remark: 0
      };
      createPayBillnew(data).then(res => {
        if (res.code == 0) {
          if (res.data.mark == 1) {
            this.tableData = res.data.data;
            this.innerVisible = true;
            // 默认全选
            this.$nextTick(() => {
              for (let i = 0; i < this.tableData.length; i++) {
                this.$refs.multipleTable2.toggleRowSelection(
                  this.tableData[i],
                  true
                );
              }
            });
          } else {
            this.$message({
              type: "success",
              message: res.msg || res.message
            });
            this.hideDialog();
            this.$emit("upData", "true");
          }
        } else {
          this.$message({
            type: "error",
            message: res.msg || res.message
          });
        }
      });
    },
    //取消
    cancel() {
      this.select = true;
      this.supplier_idstr = [];
      this.hideDialog();
    },
    //选取
    handleSelectionChange(val) {
      this.supplier_idstr = [];
      val.forEach(res => {
        this.supplier_idstr.push(res.supplier_id);
      });
      console.log(this.supplier_idstr, 88888);
    }
  }
};
</script>
